<script setup>
    import { ref,computed } from 'vue';

    const productList = ref([
        { id:"1",type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '/images/product01.png' },
        { id:"2",type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '/images/product02.png' },
        { id:"3",type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '/images/product03.png' },
        { id:"4",type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '/images/product04.png' },
        { id:"5",type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '/images/product05.png' },
        { id:"6",type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '/images/product06.png' },
    ]);

    const cartItems = ref([]);

    const addToCard = (product) => {
        const cartItem = cartItems.value.find(item => item.id === product.id)
        if(cartItem) {
            cartItem.number++
        } else {
            cartItems.value.push({...product, number: 1})
        }
    }

    const removeFromCart = (item) => {
        const index = cartItems.value.indexOf(item)
        if(index > -1) {
            cartItems.value.splice(index, 1)
        }
    }

    const handleChange = (item) => {
        if(item.number <= 0) {
            removeFromCart(item)
        }
    }

    const totalPrice = computed(() => {
        return cartItems.value.reduce((total, item) => {
            return total + item.price * item.number
        }, 0)
    })
</script>

<template>

    <el-container>
        <el-main>
            <el-row :gutter="10">
                <el-col :sm="8" :xs="12"  v-for="(product,i) in productList" :key="i"  style="margin-bottom: 10px;">
                    <el-card>
                        <img :src="product.img" style="width: 100%;"/>
                        <p>{{product.name}}</p>
                        <p>价格：{{product.price}}&nbsp;&nbsp;&nbsp;&nbsp;库存：{{product.stock}}</p>
                        <el-button @click="addToCard(product)">加入购物车</el-button>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-aside>
            <el-card style="margin-top: 20px;">
                <h2>购物车</h2>
                <div v-if="cartItems.length>0">
                    <div v-for="(item,i) in cartItems" :key="i">
                        <p style="display: flex;flex-direction: row;align-items: center;">
                            <img :src="item.img" style="width: 30%;margin-right: 5px;"/>
                            {{item.name}}
                        </p>
                        <p>
                            单价：￥{{item.price}}&nbsp;&nbsp;&nbsp;
                            <el-input-number v-model="item.number" :min="0" :max="item.stock" @change="handleChange(item)" />
                        </p>
                        <el-divider style="margin: 10px 0;"/>
                    </div>
                </div>
                <div v-else>
                    <el-empty description="暂无商品"></el-empty>
                </div>
                <p>总价：￥{{totalPrice}}</p>
            </el-card>
        </el-aside>
    </el-container>    

</template>
<style scoped>   
    a{text-decoration: none;}
</style>

